import type { NextPage } from 'next'
import Head from 'next/head'
import styles from '../styles/Home.module.scss'
import Link from 'next/link'
import "animate.css"
import {useEffect, useRef, useState} from "react";
import {useInViewport} from "ahooks";
import IndexLun from "../components/indexLun";
import IndexLunTow from "../components/indexLuntow";
const HomeCtx:NextPage = () => {
  return (
      <div className="pure-g animate__animated animate__bounce" style={{marginTop:"5rem"}}>
          <div className="pure-u-xl-1-2 pure-u-md-1-2 pure-u-lg-1-2 pure-u-sm-1" style={{padding:"1rem"}}>
            <div className={styles.homeView}>

            </div>
          </div>
          <div className="pure-u-xl-1-2 pure-u-md-1-2 pure-u-lg-1-2 pure-u-sm-1" style={{padding:"1rem"}}>
              <div className={styles.homeView}>

              </div>
          </div>
      </div>
  )
}

const Home: NextPage = () => {
    const ref = useRef(null)
    const [view,setView] = useState<number>(0)
    const [inViewport] = useInViewport(ref)
    useEffect(()=>{
        if (inViewport && view == 0) {
            setView(() => 1)
        }
    },[inViewport, view])

    // const handleMake =  () =>{
    // fetch('http://localhost:9017/role/addRole',{
    //     method:"POST",
    //     headers:{
    //         'Content-Type':'application/json',
    //         "token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VybmFtZSI6IuaigeS5vumYsyIsImV4cCI6MTY0OTgzOTQ3MSwiaXNzIjoibXktcHJvamVjdCJ9.I5FMSoH9UizyN9s2br3coBDu50thUuetfjb9fV4Ir-s"
    //     },
    //     body:JSON.stringify({
    //         roleId:1
    //     }),
    //     mode:'cors'
    // }).then(res=>res.json()).then(res=>{
    //     console.log(res)
    // }).catch(e => {
    //     console.error(e)
    // })
    // }

    return (
    <div className={styles.container}>
      <Head>
        <title>凡聚注意力产品</title>
        <meta name="description" content="Generated by create next app" />
        <meta name="viewport" content="width=device-width, initial-scale=1"/>
        <link rel="icon" href="/favicon.ico" />
        <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css"/>
          <script>
          </script>
      </Head>
      <main className={styles.main}>
        <div className={"animate__animated animate__zoomInLeft"}>
          <h1 className={styles.title} >
            Welcome to <a href="https://nextjs.org">Next.js!</a>
          </h1>
        </div>


        <p className={styles.description}>
          Get started by editing{' '}
          <code className={styles.code}>pages/index.tsx</code>
        </p>

        <div className={styles.grid}>
          <Link href='/training'>
            <a href="" className={`${styles.card} animate__animated animate__fadeInLeft`}>
              <h2>Training &rarr;</h2>
              <p>Find in-depth information about Next.js features and API.</p>
            </a>
          </Link>


          <a href="https://nextjs.org/learn"  className={`${styles.card} animate__animated animate__fadeInRight`}>
            <h2>Learn &rarr;</h2>
            <p>Learn about Next.js in an interactive course with quizzes!</p>
          </a>

          <a
            href="https://github.com/vercel/next.js/tree/canary/examples"
            className={`${styles.card} animate__animated animate__fadeInLeft`}
          >
            <h2>Examples &rarr;</h2>
            <p>Discover and deploy boilerplate example Next.js projects.</p>
          </a>

          <a
            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
            className={`${styles.card} animate__animated animate__fadeInRight`}
          >
            <h2>Deploy &rarr;</h2>
            <p>
              Instantly deploy your Next.js site to a public URL with Vercel.
            </p>
          </a>
        </div>
      </main>


      <div className={styles.yule} ref={ref}>
          {/*<div className={`${styles.box} ${styles.wave_box}`}/>*/}

          <div className={`${styles.children_box} ${styles.children_wave_box}`}/>
      </div>
        <IndexLun/>
        <IndexLunTow/>
        {view==1&&<HomeCtx/>}

    </div>

  )
}


export default Home

